<template>
  <div class="login-account">
    <el-form ref="loginPhoneRef" :model="loginPhoneForm" :rules="loginPhoneRules">
      <el-form-item prop="phone" label="手机号：">
        <el-input v-model.number="loginPhoneForm.phone" type="text" autocomplete="on"></el-input>
      </el-form-item>
      <el-form-item prop="verifCode" label="验证码：">
        <el-input :input-style="{ width: '170px' }" v-model="loginPhoneForm.verifCode" type="text"></el-input>
        <el-button class="btn" type="primary">请求验证码</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { defineExpose } from '@vue/runtime-core'
import { ref } from '@vue/reactivity'
import { reactive } from 'vue'
import { ElForm } from 'element-plus'
import { useStore } from 'vuex'
// 导入我们的账号校验配置
import loginPhoneRules from '../config/phone-config'
const store = useStore()
const loginPhoneForm: LoginPhoneFromType = reactive({
  phone: '',
  verifCode: ''
})
// 在使用el的form表单的ref引用时，需要提前通过以下固定方式获取到ref
const loginPhoneRef = ref<InstanceType<typeof ElForm>>()

const loginAction = () => {
  console.log('phone正在登录')
  loginPhoneRef.value?.validate((valid) => {
    // 表单校验
    if (valid) {
      // 开始真正登录验证
      // 1.请求我们login的store模块的action请求
      store.dispatch('login/phoneLoginAction',loginPhoneForm)
    }
  })
}
defineExpose({
  loginPhoneForm,
  loginAction
})
</script>

<style scoped lang="less">
.btn {
  display: flex;
  justify-content: center;
  width: 90px;
}
</style>
